<template>
  <div class="left-navigation-container">
    <div class="head flex flex-col items-center">
      <img class="icon" src="@/icons/svg/productAssistant/productAss_icon.svg"  alt="icon"/>
      <van-button
        class="create-msg-btn"
        plain
        round
        icon="plus"
        color="#436BFF"
        type="primary"
        @click="newMsg"
      >
        新建对话
      </van-button>
      <van-divider class="w-full" style="margin-bottom: 0px">推荐记录</van-divider>
    </div>
    <recordList class="list" @onSelectItem="() => $emit('onClose')" />
  </div>
</template>

<script setup>
import { defineEmits } from "vue";
import recordList from "./recordList.vue";
import { useCommonCozeBotStore } from "@/store";

const store = useCommonCozeBotStore();
const emit = defineEmits(["onClose"]);

function newMsg() {
  store.newMsg();
  emit("onClose");
}
</script>

<style lang="less" scoped>
.left-navigation-container {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .head {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .list {
    overflow-y: auto;
    flex: 1;
  }

  .icon {
    width: 72px;
    border-radius: 8px;
    background-color: #e5eeff;
    padding: 16px;
    margin-bottom: 24px;
  }

  .create-msg-btn {
    height: 32px;
    width: 116px;
  }
}
</style>
